<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('盘点单据明细')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        .deer-key {
            width: 95px;
        }
        .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body>
<div class="container-div">
<!--    <a class="btn btn-info" @click="detailExcel()">-->
<!--        <i class="fa fa-download"></i> 导出-->
<!--    </a>-->
    <a class="btn btn-default" @click="closeModal()">
        <i class="fa fa-reply"></i> 返回
    </a>
    <el-row class="deer-panel">
        <span style="color: #409EFF">盘点单信息</span>
        <el-divider style="margin-top: 10px"></el-divider>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">盘点单号：</div>
                <div class="deer-value" v-cloak>{{master.billNo}}</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">盘点人：</div>
                <div class="deer-value" v-cloak>{{master.createUserName}}</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">创建时间：</div>
                <div class="deer-value" v-cloak>{{master.createTime}}</div>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-tabs type="border-card" class="deer-panel" style="margin-top: 15px;padding-top: 0px">
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-date"></i> 物料列表</span>
                    <el-table :data="details" border stripe>
                        <el-table-column label="操作" align="center" width="85">
                            <template slot-scope="scope">
                                <el-button type="text" @click="lookOver(scope.row.itemId, scope.$index)">托盘明细</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column width="130" prop="itemCode" align="center" label="物料编码"></el-table-column>
                        <el-table-column width="200" prop="itemName" align="center" label="物料描述"></el-table-column>
                        <el-table-column  align="center" label="类型">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.sort == 1">钢材</el-tag>
                                <el-tag v-if="scope.row.sort == 2">铜材</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="weight" align="center" label="库存总重量"></el-table-column>
                        <el-table-column prop="realWeight" align="center" label="盘点总重量"></el-table-column>
                        <el-table-column prop="diffWeight" align="center" label="差额总重量"></el-table-column>
                        <el-table-column prop="unit" align="center" label="单位"></el-table-column>
                    </el-table>
<!--                    <el-pagination-->
<!--                            @current-change="billDetailsCurrentPage"-->
<!--                            :current-page="dp.currentPage"-->
<!--                            :page-size="dp.pageSize"-->
<!--                            layout="prev, pager, next"-->
<!--                            :total="dp.total">-->
<!--                    </el-pagination>-->
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
    <el-dialog
            title="托盘信息"
            width="80%"
            :visible.sync="itemListState">
        <el-table :data="itemDetails.list" border stripe height="265">
            <el-table-column prop="itemCode" label="物料编码" align="center" width="110"></el-table-column>
            <el-table-column prop="itemName" label="物料描述" align="center" width="200"></el-table-column>
            <el-table-column prop="sort" label="物料类型" align="center" width="90">
                <template slot-scope="scope">
                    <span v-if="scope.row.sort ==1">
                        钢材
                    </span>
                    <span v-if="scope.row.sort ==2">
                        铜材
                    </span>
                </template>
            </el-table-column>
            <el-table-column width="200" prop="memo" align="center" label="库位"></el-table-column>
            <el-table-column prop="weight" label="库存重量" align="center" width="80"></el-table-column>
            <el-table-column prop="realWeight" label="盘点重量" align="center" width="80"></el-table-column>
            <el-table-column prop="diffWeight" label="差额重量" align="center" width="80"></el-table-column>
            <el-table-column prop="unit" label="单位" align="center" width="80"></el-table-column>
            <el-table-column prop="sort" label="状态" align="center" width="80">
                <template slot-scope="scope">
                    <span v-if="scope.row.sort ==1">
                        未盘点
                    </span>
                    <span v-if="scope.row.sort ==2">
                        盘点中
                    </span>
                    <span v-if="scope.row.sort ==3">
                        已完成
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="checkUserName" label="盘点人" align="center" width="80"></el-table-column>
            <el-table-column prop="checkTime" label="盘点时间" align="center" width="170">
                <template slot-scope="scope">
                    <span v-if="scope.row.checkTime != null">
                                    {{scope.row.checkTime.slice(0, 19)}}
                                </span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="170">
                <template slot-scope="scope">
                    <span v-if="scope.row.createTime != null">
                                    {{scope.row.createTime.slice(0, 19)}}
                                </span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="itemDetailsCurrentPage"
                :current-page="itemDetails.currentPage"
                :page-size="itemDetails.pageSize"
                layout="prev, pager, next"
                :total="itemDetails.total">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeItem()">关 闭</el-button>
        </span>
    </el-dialog>
</div>

<div th:include="include::footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "boxitemcheck";

    var boxItemCheckId = parseInt(localStorage.getItem(prefix+'/detail'));

    var vue = new Vue({
        el: '.container-div',
        data: {
            ckid: '',
            master: {},
            details: [],
            dp:{
                currentPage: 1,
                pageSize: 10,
                total: '',
            },
            areas: [],
            itemListState: false,
            getIndex: '',
            itemDetails: {
                currentPage: 1,
                pageSize: 5,
                total: '',
                list: []
            },
        },
        methods: {
            //入库单详细分页
            billDetailsCurrentPage(currentPage){
                this.dp.currentPage = currentPage;
                this.getDetails();
            },
            getItemDetails(id){
                var that = this;
                $.ajax({
                    url: "/boxitemcheck/findListdetailBox",
                    type: "POST",
                    data: {
                        boxItemCheckId: this.master.boxItemCheckId,
                        itemId: id,
                        pageSize: that.itemDetails.pageSize,
                        pageNum: that.itemDetails.currentPage
                    },
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.itemDetails.list = data.rows;
                        that.itemDetails.total = data.total;
                    }
                })
            },
            //关闭晶棒详细
            closeItem(){
                this.itemListState = false;
                this.getIndex = '';
                this.itemDetails.list = [];
            },
            itemDetailsCurrentPage(currentPage){
                this.itemDetails.currentPage = currentPage;
                this.getItemDetails(this.ckid);
            },
            lookOver(id, index){
                this.getIndex = index;
                this.itemListState = true;
                this.ckid=id;
                this.getItemDetails(id);
            },
            //关闭此页面
            closeModal(){
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            },
            //获取单据信息
            getMaster: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: '/boxitemcheck/findListcheck',
                    data: {
                        id: boxItemCheckId
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        if(data.createTime != null){
                            data.createTime = data.createTime.slice(0, 19);
                        }
                        that.master = data;
                    }
                });
            },

            //获取盘点信息
            getDetails: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: '/boxitemcheck/findListdetail',
                    data: {
                        id: boxItemCheckId
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        var list = data.rows;
                        for(var i = 0; i < list.length; i++){
                            list[i].difference = list[i].realQuantity - list[i].quantity;
                            if(list[i].createTime != null){
                                list[i].createTime = list[i].createTime.slice(0, 19);
                            }
                            if(list[i].checkTime != null){
                                list[i].checkTime = list[i].checkTime.slice(0, 19);
                            }
                        }
                        that.details = list;
                        that.dp.total = data.total;
                    }
                });
            },
            //获取货区列表
            getAreas: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/areaInfo/list",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.areas = data.rows;
                    }
                });
            },
            //导出
            detailExcel(){
                var url = "exportlist";
                var data = {"boxItemCheckId": boxItemCheckId};
                $.post(url, data, function(result){
                    if(result.code == web_status.SUCCESS){
                        window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
                    }else if(result.code == web_status.WARNING){
                        $.modal.alertWarning(result.msg);
                    }else{
                        $.modal.alertError(result.msg);
                    }
                    $.modal.closeLoading();
                });
            }

        },

        created(){
            this.getMaster();
            this.getDetails();
            this.getAreas();
        }
    })
</script>
</body>
</html>
